<template>
  <div>
      <top-bar></top-bar>
      <left-bar :datas='data'></left-bar>
      <div class="system">
            <home-bar :currentPage='currentPage'></home-bar>
             <div class="system-main">
                 <div class="main-position">
                     首页  >   财富管理  > 信息费明细
                     <a href="javascript:void(0);"><i class="el-icon-refresh"></i></a>
                 </div>
                 <div class="main-height"></div>
                 <div class="main-mains">
                    <div class="main-top-nav">
                        <ul>
                            <router-link to="/wealthmain" @click.native="addPath('/wealthmain','财富管理')">
                                <li>主页</li>
                            </router-link>
                            <router-link to="/balancedetail" @click.native="addPath('/balancedetail','财富管理')">
                                <li>余额明细</li>
                            </router-link>
                            <router-link to="/integraldetail" @click.native="addPath('/integraldetail','财富管理')">
                                <li>积分明细</li>    
                            </router-link>
                            <router-link to="/redenvelopedetail" @click.native="addPath('/redenvelopedetail','财富管理')">
                                <li>红包明细</li>
                            </router-link>
                            <router-link to="/rechargedetail" @click.native="addPath('/rechargedetail','财富管理')">
                                <li>充值明细</li>
                            </router-link>
                            <router-link to="/withdrawaldetail" @click.native="addPath('/withdrawaldetail','财富管理')">
                                <li>提现明细</li>
                            </router-link>
                            <router-link to="/rolloutdetail" @click.native="addPath('/rolloutdetail','财富管理')">
                                <li>转出明细</li>
                            </router-link>
                            <router-link to="/loandetail" @click.native="addPath('/loandetail','财富管理')">
                                <li>贷款明细</li>
                            </router-link>
                            <router-link to="/informationcostsdetail" @click.native="addPath('/informationcostsdetail','财富管理')">
                                <li class="active">信息费明细</li>
                            </router-link>
                        </ul>
                    </div>
                     <div class="wealthInner">
                       <div class="wealthMainOne">
                        <div class="TotalAssets">
                          <img src="../../images/wealt06.png" alt=""><span>信息费：¥9060元</span>
                        </div>
                        <div class="echartBox">
                            <div id="balanceEchart" style="height:500px"></div>
                        </div>
                       </div>
                       <div class="wealthMainTwo">
                         <div class="headingBox"><h5 class="heading">30天内信息费变化</h5></div>
                         <div class="toolBox">
                           <div class="toolLeft fl">
                              <span>批量导出</span>
                              <span>筛选</span>
                              <span>打印表格</span>
                              <span>清空筛选</span>
                           </div>
                           <div class="screeningKeyword fr">
                             <span>感冒<i class="el-icon-close"></i></span>
                             <span>发烧<i class="el-icon-close"></i></span>
                           </div>
                         </div>
                         <table>
                           <tbody>
                             <tr>
                               <td>
                                 <el-checkbox class="fl" v-model='cheackAllChecked' @change='checkAllFun'></el-checkbox>
                                 序号
                                </td>
                               <td>日期</td>
                               <td>时间</td>
                               <td>进出账类型</td>
                               <td>支出/收入</td>
                               <td>金额（元）</td>
                               <td>手续费</td>
                               <td>余额（元）</td>
                             </tr>
                             <tr v-for="(trading,index) in tableList" :key="index">
                               <td><el-checkbox  class="fl"  v-model='checkArr' :label="trading.id" @change="changevalue"></el-checkbox>{{trading.one}}</td>
                               <td>{{trading.two}}</td>
                               <td>{{trading.three}}</td>
                               <td>{{trading.four}}</td>
                               <td>{{trading.five}}</td>
                               <td>{{trading.six}}</td>
                               <td>{{trading.seven}}</td>
                               <td>{{trading.eight}}</td>
                             </tr>
                           </tbody>
                         </table>
                         <div class="pageBotom">
                            <div class="pageBotomLeft">
                            <el-checkbox class="fl" v-model='cheackAllChecked' @change='checkAllFun'>全选</el-checkbox>
                            <span class="reverseSelected" @click="reverseChecked">反选</span>
                            <span class="deleteSelected">删除选中</span>
                            </div>
                            <div class="pageBotomRight">
                                <el-pagination
                                        @size-change="handleSizeChange"
                                        @current-change="handleCurrentChange"
                                        :current-page="currentPage4"
                                        :page-sizes="[100, 200, 300, 400]"
                                        :page-size="100"
                                        layout="total, sizes, prev, pager, next, jumper"
                                        :total="400">
                                </el-pagination>
                            </div>
                        </div>
                       </div>
                     </div>
                 </div>
             </div>
       </div>
  </div>
</template>

<script>
import topBar from "../../public/top";
import leftBar from "../../public/left";
import homeBar from "../../public/homebar";

// 引入基本模板
let echarts = require("echarts/lib/echarts");
// 引入柱状图组件
require("echarts/lib/chart/line");
require("echarts/lib/chart/bar");
// 引入提示框和title组件
require("echarts/lib/component/tooltip");
require("echarts/lib/component/title");

export default {
  components: {
    leftBar,
    topBar,
    homeBar
  },
  data() {
    return {
      data: "wealthManagement",
      currentPage: { path: "/informationcostsdetail", name: "财富管理" },
      tableList: [
        {
          id: "1",
          one: "01",
          two: "2017/12/30",
          three: "22:56:56",
          four: "充值",
          five: "收入",
          six: "6000",
          seven: "0",
          eight: "365912"
        },
        {
          id: "2",
          one: "01",
          two: "2017/12/30",
          three: "22:56:56",
          four: "充值",
          five: "收入",
          six: "6000",
          seven: "0",
          eight: "365912"
        }
      ],
      cheackAllChecked: false,
      checkArr: [],
      checkCompleteArr: [],
      currentPage4: 1
    };
  },
  methods: {
    balanceEchartFun() {
      let balanceEchart = echarts.init(
        document.getElementById("balanceEchart")
      );
      let option = {
        tooltip: {
          trigger: "axis"
        },
        title: {
          text: "30天内信息费变化",
          x: "left",
          align: "right"
        },
        color: ["#2061f4"], //线条颜色
        toolbox: {
          //右上角切换按钮
          show: true,
          feature: {
            dataView: { show: true, readOnly: false },
            magicType: { show: true, type: ["line", "bar"] },
            restore: { show: true },
            saveAsImage: { show: true }
          }
        },
        xAxis: {
          type: "category",
          data: [
            "1:00",
            "2:00",
            "3:00",
            "4:00",
            "5:00",
            "6:00",
            "7:00",
            "8:00",
            "9:00",
            "10:00",
            "11:00",
            "12:00",
            "13:00",
            "14:00",
            "15:00",
            "16:00",
            "17:00",
            "18:00",
            "19:00",
            "20:00",
            "21:00",
            "22:00",
            "23:00",
            "24:00"
          ]
        },
        yAxis: [
          {
            type: "value",
            axisLabel: {
              formatter: "￥{value} k"
            }
          }
        ],
        series: [
          {
            data: [
              10,
              20,
              40,
              30,
              80,
              100,
              10,
              20,
              40,
              30,
              80,
              100,
              10,
              20,
              40,
              30,
              80,
              100,
              10,
              20,
              40,
              30,
              80,
              100
            ],
            type: "line",
            smooth: true,
            areaStyle: {
              //渐变背景
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#c0d1f7"
                  },
                  {
                    offset: 1,
                    color: "#fff"
                  }
                ])
              }
            }
          }
        ]
      };
      balanceEchart.setOption(option);
      window.addEventListener("resize", function() {
      balanceEchart.resize();
      });
    },
    checkAllFun() {
      //实现全选（1/5）
      var _this = this;
      this.checkArr = [];
      if (this.cheackAllChecked) {
        this.tableList.forEach(function(item, index) {
          if (index >= 0) {
            _this.checkArr.push(item.id);
          }
        });
      }
    },
    reverseChecked() {
      //实现反选（2/5）
      var _this = this;
      var changeArr = [];
      this.tableList.forEach(function(item, index) {
        if (index >= 0) {
          changeArr.push(item.id);
        }
      });
      this.removeByValue(changeArr, this.checkArr);
    },
    removeByValue(changearr, checkarr) {
      //反选过滤函数（3/5）
      var _this = this;
      for (var j = 0; j < checkarr.length; j++) {
        for (var i = 0; i < changearr.length; i++) {
          if (changearr[i] === checkarr[j]) {
            changearr.splice(i, 1);
            break;
          }
        }
      }
      this.checkArr = changearr;
      if (changearr.length <= _this.checkCompleteArr.length) {
        this.cheackAllChecked = false;
      }
      if (changearr.length === _this.checkCompleteArr.length) {
        this.cheackAllChecked = true;
      }
    },
    changevalue() {
      //选项的change事件（4/5）
      var _this = this;
      if (this.checkArr.length <= _this.checkCompleteArr.length) {
        this.cheackAllChecked = false;
      }
      if (this.checkArr.length === _this.checkCompleteArr.length) {
        this.cheackAllChecked = true;
      }
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    addPath(n1, n2) {
      //点击切换home-bar
      var obj = {};
      obj.n1 = n1;
      obj.n2 = n2;
      this.$store.commit("addPath", obj);
    }
  },
  mounted() {
    this.balanceEchartFun();
    //全选或反选用到的完整数组值（5/5）
    var _this = this;
    this.tableList.forEach(function(item, index) {
      if (index >= 0) {
        _this.checkCompleteArr.push(item.id);
      }
    });
  }
};
</script>

<style lang="less">
@import "../css/wealth.less";
</style>


